<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>插值语法</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.5.13/vue.global.js"></script>
    </head>
    <body>
        <div id="app">
          <!-- 插值语法的结构很固定，用双大括号包含一个JavaScript表达式，即{{JavaScript表达式}}。 -->
          <p>{{ 123 }}</p>
          <p>{{ msg }}</p>
          <p>{{ msg.toUpperCase() }}</p>
          <p>{{ score > 60 ? '及格' : '不及格' }}</p>
        </div>
        <script>
            const { createApp } = Vue
            // 模板中的变量读取数据的来源都是配置指定的data对象。
            createApp({
                data() {
                    return {
                        msg: 'Hello Vue!',
                        score: 69
                    }
                }
            }).mount('#app')
        </script>
    </body>
</html>